<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>我的社团</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../css/basic.css">
    <link rel="stylesheet" href="../layui/css/layui.css" media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
    <script src="../layui/layui.js" charset="utf-8"></script>
    <style type="text/css"> 
        .show{
        border: 2px dotted gainsboro;
        height: 180px;
        width: 500px;
        padding: 10px;
        margin: 10px auto;
        line-height: 20px;
        box-shadow: darkgrey 5px 5px 10px 2px ;
        border-radius: 20px 5px;
    }
    .show img{
        width: 100px;
        height: 100px;
        float: left;
        margin: 25px 10px;
    }
    .show input[type='button']{
        width: 40px;
        height: 25px;
        background-color: #f18181;
        color:white;
        border: 1px solid #F18181;
        margin-top: 5px;
        margin-left: 80px;
    }
    .show span{
        display:inline-block;
        background:url(../img/空心.png);
        background-size: cover;
        width: 30px;
        height: 20px;
        position: relative;
        top: 5px;
        left: 80px;
    }
    .show a{
        background: #00b7ee;
        color: white;
        float: right;
        margin-top: 10px;
        margin-right: 30px;
    }
    </style>
    </head>

<body>
    <table class="layui-hide" id="stuFirst" lay-filter="stuFirst"></table>
    
    <div class="layui-tab layui-tab-brief"  style="display:none"  id="itemAll">
        <ul class="layui-tab-title">
          <li class="layui-this">社团信息</li>
          <li>成员信息</li>
        </ul>
        <div class="layui-tab-content">
          <div class="layui-tab-item layui-show">
            <div class="show">
                    <img src="../img/触角动漫.jpg" />
                    <h4>河南大学触角动漫社</h4>
                    <dl>
                        <li>成立时间：2000年</li>
                        <li>挂靠单位：上海虫角有限公司</li>
                        <li>会员人数：1233人</li>
                        <li>精品活动：新人见面会、周年祭文艺演出、大型动漫舞台<br/>剧比赛、动漫放映会、原创动漫作品动漫交流会......</li>
                    </dl>
                <a class="layui-btn" id="iBtn">关闭</a>
            </div>
          </div>
          <div class="layui-tab-item">
                <table class="layui-hide"  id="peopleInfo" lay-filter="peopleInfo"></table>
          </div>
        </div>
      </div>
</body>


<form id="addNumber" class="layui-form bs-hidden fm-in" lay-filter="addNumber">
    <div class="layui-form-item">
        <label class="layui-form-label"> 学号：</label>
        <div class="layui-input-block">
            <input type="text" name="a1" readonly lay-verify="required" placeholder="1610252111" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">姓名：</label>
        <div class="layui-input-block">
        <input type="text" name="a2" readonly  lay-verify="required" placeholder="大哈" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">性别：</label>
        <div class="layui-input-block">
          <input type="radio" name="sex" value="男" title="男"  readonly>
          <input type="radio" name="sex" value="女" title="女" checked  readonly>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">年龄：</label>
        <div class="layui-input-block">
            <input type="text" name="a4" readonly  lay-verify="required" placeholder="23" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">加入时间：</label>
        <div class="layui-input-block">
          <input type="text" class="layui-input" id="Ctime" lay-filter="Ctime"  readonly>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">加入社团：</label>
        <div class="layui-input-block">
        <input type="text" name="a6" readonly lay-verify="required" placeholder="动漫社" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">年级：</label>
        <div class="layui-input-block">
        <input type="text" name="a6" readonly lay-verify="required" placeholder="2016" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">学院：</label>
        <div class="layui-input-block">
        <input type="text" name="a6" readonly lay-verify="required" placeholder="软件学院" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">电话：</label>
        <div class="layui-input-block">
        <input type="text" name="a6" readonly lay-verify="required" placeholder="18212341234" autocomplete="off" class="layui-input">
        </div>
    </div>
  </form>
  


<script type="text/html" id="ipts">
    <a class="layui-btn layui-btn-xs" lay-event="detail">详情</a>
    <a class="layui-btn layui-btn-xs" lay-event="del">退出</a>
</script>

<script type="text/html" id="ipts2">
    <a class="layui-btn layui-btn-xs" lay-event="detail2" id="detail2">详情</a>
</script>


<script>
layui.use(['table','layer','jquery','element','laydate','form'], function() {
        var table = layui.table;
        var layer = layui.layer;
        var $ = layui.jquery;
        var element = layui.element;
        var laydate = layui.laydate;
        var form = layui.form;
//监听提交
        form.on('submit(formDemo)', function(data){
            return false;
        });
//执行一个laydate实例
        laydate.render({
            elem: '#Time1' //指定元素
        });
//展示已知数据
    table.render({
        elem: '#stuFirst',
        cols: [
            [ //标题栏
                //标题栏
            {
                field: 'PartyName',
                title: '社团名称',
                width: "15%",
                align:"center"
                
            }, {
                field: 'PartyId',
                title: '社团号',
                width: "15%",
                align:"center"
                
            }, {
                field: 'PartyType',
                title: '社团类别',
                width: "10%",
                align:"center"
            }, {
                field: 'PartyAddress',
                title: '挂靠单位',
                width: "15%",
                align:"center"
            }, {
                field: 'leader',
                title: '负责人',
                width: "10%",
                align:"center"
            }, {
                field: 'leaderPhone',
                title: '负责人电话',
                width: "15%",
                align:"center"
            }, {
                field: 'peopleCount',
                title: '当前人数',
                width: "8%",
                align:"center"
            },{
                field: 'btn',
                title: '操作',
                width: "12%",
                align:"center",
                toolbar:"#ipts"
            }
            ]
        ],
        page: false,
        data: [{
                "PartyName": "触角动漫社",
                "PartyId": "10001",
                "PartyType": "娱乐",
                "PartyAddress": "上海虫角有限公司",
                "LeaderDate": "明伦校区",
                "leader": "顾金",
                "leaderPhone": "15536875632",
                "peopleCount": "1233",
            },{
                "PartyName": "软件社",
                "PartyId": "10002",
                "PartyType": "科技",
                "PartyAddress": "河南大学软件学院",
                "LeaderDate": "金明校区、明伦校区",
                "leader": "乔保军",
                "leaderPhone": "13637843453",
                "peopleCount": "298",
            },{
                "PartyName": "双节棍社",
                "PartyId": "10003",
                "PartyType": "娱乐",
                "PartyAddress": "河南大学体育学院",
                "LeaderDate": "明伦校区",
                "leader": "王文强",
                "leaderPhone": "17635421322",
                "peopleCount": "345",
            },{
                "PartyName": "轮滑社",
                "PartyId": "10004",
                "PartyType": "娱乐",
                "PartyAddress": "郑州滑浪有限公司",
                "LeaderDate": "金明校区、明伦校区",
                "leader": "李天昊",
                "leaderPhone": "17637844456",
                "peopleCount": "543",
            }
            ]
            //,skin: 'line' //表格风格
            ,
        even: true
    });           

  //第一个实例
  table.render({
    elem: '#peopleInfo',
    page: true,//开启分页
    cols: [
        [ //表头
          {
            field: 'id',
            title: '学号',
            width: '15%',
            sort: true,
            fixed: 'left',
            align: 'center'
          }, {
            field: 'cName',
            title: '姓名',
            width: '15%',
            align: 'center'
          }, {
            field: 'cSex',
            title: '性别',
            width: '10%',
            align: 'center',
            sort: true
          }, {
            field: 'cAge',
            title: '年龄',
            width: '10%',
            align: 'center'
          },  {
            field: 'cTime',
            title: '加入时间',
            width: '15%',
            align: 'center'
          },{
            field: 'cParty',
            title: '加入的社团',
            width: '15%',
            align: 'center'
          },{
                field: 'btn',
                title: '操作',
                width: "18%",
                align:"center",
                toolbar:"#ipts2"
          }
        ]
      ]
      //加载数据
      ,
    data: [{
        "id": 1610252222,
        "cName": "张三",
        "cSex": "男",
        "cAge": "23",
        "cTime":"",
        "cParty":"篮球社",
      },{
       "id": 1610252222,
        "cName": "王大锤",
        "cSex": "男",
        "cAge": "23",
        "cTime":"",
        "cParty":"篮球社",
      },{
        "id": 1610252222,
        "cName": "王二哈",
        "cSex": "男",
        "cAge": "23",
        "cTime":"",
        "cParty":"篮球社",
      }
    ]
  });




table.on('tool(stuFirst)', function (obj) {
    var event = obj.event;
    var that = $(this);
    if(event ==='detail'){
            $("#itemAll").slideToggle();
    }
    
    });


table.on('tool(peopleInfo)', function (obj) {
    var event = obj.event;
    var that = $(this);
    if(event ==='detail2'){
        layer.open({
        type: 1,
        closeBtn: 1,
        title: '社员信息详情',
        content: $('#addNumber'),
        area: ['800px', '600px'],
      })
    }
    
    });

    });
    </script>
</html>

